<div class="row">
  <div class="col-md-4 col-xs-12">
    <ba-card title="添加公告">
      <form class="announcement-form"
            [formGroup]="editForm" 
            (ngSubmit)="submitAnnouncement(editForm.value)">
        <div class="form-group"
              [ngClass]="{ 
                'has-error': (!state.valid && state.touched), 
                'has-success': (state.valid && state.touched)
              }">
          <label for="announcementType">
            <h5>公告状态</h5>
          </label>
          <select class="form-control c-select" 
                  id="announcementType" 
                  [formControl]="state">
            <option value="1">已发布</option>
            <option value="0">草稿</option>
          </select>
        </div>
        <div  class="form-group"
              [ngClass]="{ 
                'has-error': (!content.valid && content.touched), 
                'has-success': (content.valid && content.touched)
              }">
          <label for="announcementContent">
            <h5>公告内容</h5>
          </label>
          <markdown-editor class="form-control announcement-content" 
                           title="文章内容"
                           [config]="{ lineWrapping: true }"
                           [formControl]="content">
          </markdown-editor>
        </div>
        <hr>
        <div class="col-sm-12">
          <button type="submit"
                  class="btn btn-success"
                  [disabled]="!editForm.valid">{{ edit_announcement ? '修改' : '添加' }}公告</button>
          <span>&nbsp;</span>
          <button class="btn btn-default" (click)="resetForm()">重置</button>
        </div>
      </form>
    </ba-card>
  </div>
  <div class="col-md-8 col-xs-12">
    <ba-card title="全部公告" baCardClass="with-scroll">
      <div class="clearfix">
        <div class="pull-left">
          <div class="btn-group">
            <button type="button"
                    class="btn btn-default active"
                    [ngClass]="{ 'active': searchState == 'all'}"
                    (click)="switchState('all')">
              <span>全部</span>
              <span *ngIf="searchState == 'all'">({{ announcements.pagination.total }})</span>
            </button>
            <button type="button"
                    class="btn btn-default"
                    [ngClass]="{ 'active': searchState == 1 }"
                    (click)="switchState(1)">
              <span>已发布</span>
              <span *ngIf="searchState == 1">（{{ announcements.pagination.total }}）</span>
            </button>
            <button type="button"
                    class="btn btn-default"
                    [ngClass]="{ 'active': searchState == 0 }"
                    (click)="switchState(0)">
              <span>草稿</span>
              <span *ngIf="searchState == 0">（{{ announcements.pagination.total }}）</span>
            </button>
          </div>
          <span>&nbsp;</span>
          <div class="btn-group" role="group">
            <button type="button" 
                    class="btn btn-default btn-with-icon" 
                    (click)="refreshAnnouncements()">
              <i class="ion-refresh"></i>
              <span>刷新</span>
            </button>
            <button type="button" 
                    class="btn btn-default btn-with-icon"
                    (click)="resetSearchForm()">
              <i class="ion-trash-b"></i>
              <span>清空关键词</span>
            </button>
            <div class="btn-group" dropdown [isDisabled]="!selectedAnnouncements.length">
              <button type="button"
                      class="btn btn-default btn-with-icon dropdown-toggle"
                      dropdownToggle>
                <i class="ion-ios-list"></i>
                <span>批量操作</span>
              </button>
              <ul class="dropdown-menu" *dropdownMenu>
                <li class="dropdown-item">
                  <a [href]="" (click)="delAnnouncementsModal()">批量删除</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <form class="pull-right form-inline navbar-form announcement-search-form" 
              [formGroup]="searchForm" 
              (ngSubmit)="searchAnnouncements(searchForm.value)">
          <div class="input-group" style="margin: 0">
            <input type="text"
                   placeholder="公告内容"
                   [formControl]="keyword"
                   class="form-control with-default-addon">
            <span class="input-group-btn">
              <button class="btn btn-default" 
                      type="submit"
                      [disabled]="!searchForm.valid">搜索</button>
            </span>
          </div>
        </form>
      </div>
      <div class="table-responsive">
        <div class="announcement-list">
          <table class="table table-striped table-no-borders black-muted-bg table-enrich">
            <thead class="thead-inverse">
              <tr>
                <th class="batch-checkbox">
                  <ba-checkbox [(ngModel)]="announcementsSelectAll" (ngModelChange)="batchSelectChange($event)">
                    <span ba-checkbox-label>
                      <span>&nbsp;</span>
                      <strong>ID</strong>
                    </span>
                  </ba-checkbox>
                </th>
                <th width="50%">内容</th>
                <th class="text-center">状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!announcements || !announcements.data.length">
                <td colspan="7">
                  <p class="text-muted text-center announcement-err-msg">
                    <span *ngIf="fetching.announcement">数据请求中...</span>
                    <span *ngIf="!fetching.announcement">暂无数据</span>
                  <p>
                </td>
              </tr>
              <ng-template [ngIf]="announcements && announcements.data.length">
                <tr *ngFor="let announcement of announcements.data">
                  <td class="batch-checkbox">
                    <ba-checkbox [(ngModel)]="announcement.selected" (ngModelChange)="itemSelectChange()">
                      <span ba-checkbox-label>
                        <span>&nbsp;</span>
                        <strong>{{ announcement.id }}</strong>
                      </span>
                    </ba-checkbox>
                  </td>
                  <td>
                    <div class="content ql-editor" 
                         [innerHTML]="parseMarkdown(announcement.content)"></div>
                  </td>
                  <td align="center">
                    <span>{{ announcement.state == 1 ? '已发布' : '草稿' }}</span>
                    <span *ngIf="announcement.state == 0">&nbsp;</span>
                    <i class="ion-checkmark text-success" *ngIf="announcement.state == 1"></i>
                    <i class="ion-edit text-warning" *ngIf="announcement.state == 0"></i>
                  </td>
                  <td>
                    <div class="text-center">
                      <div class="btn-group" role="group">
                        <button type="button"
                                class="btn btn-sm btn-warning"
                                (click)="putAnnouncement(announcement)">编辑公告</button>
                        <button type="button"
                                class="btn btn-sm btn-danger"
                                (click)="delAnnouncementModal(announcement)">删除公告</button>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </table>
          <br>
          <div class="text-center">
            <pagination class="pagination-xs"
                        firstText="首页"
                        lastText="末页"
                        nextText="下一页"
                        previousText="上一页"
                        pageBtnClass="btn-primary"
                        [totalItems]="announcements.pagination.total"
                        [itemsPerPage]="announcements.pagination.per_page"
                        [(ngModel)]="announcements.pagination.current_page"
                        [maxSize]="7"
                        [boundaryLinks]="true"
                        [rotate]="false"
                        (pageChanged)="pageChanged($event)">
            </pagination>
          </div>
        </div>
      </div>
    </ba-card>
  </div>
  <!-- 删除确认弹窗 -->
  <div bsModal #delModal="bs-modal" class="modal fade" tabindex="1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" aria-label="Close" (click)="canceldDelAnnouncementModal()">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">确认操作</h4>
        </div>
        <div class="modal-body">
          <div class="message">
            <span class="icon text-warning">
              <i class="ion-ios-information-outline"></i>
            </span>
            <span>确定要删除{{ del_announcement ? '这条' : '选中' }}公告吗？</span>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary confirm-btn" (click)="(del_announcement ? doDelAnnouncement() : doDelAnnouncements())">确认删除</button>
          <span>&nbsp;</span>
          <button class="btn btn-default confirm-btn" (click)="canceldDelAnnouncementModal()">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>
